$(function () {
    var phonePic = $(".header_phone");
    var voicePic = $(".header_voice");
    var fixings = $(".header_fixings");
    var life = $(".header_life");
    $.ajax({
        type: "get",
        url: "../lib/index1.php",
        dataType: "json",
        success: function (response) {
            var template = '';
            var template1 = '';
            var template2 = '';
            var template3 = '';
            response.forEach((elm, i) => {
                var pic = JSON.parse(elm.pic);
                if (elm.type == "phone" && i < 8) {
                    template += `<li>
                            <a href="../html/product_detail.html?id=${elm.id}">                           
                                <img src="..${pic.src}" alt="${pic.title}">
                                <span>${elm.title}</span>
                                <em>${elm.price}</em>
                            </a>
                        </li>`;
                } else if (elm.type == "earphone") {
                    template1 += `<li>
                            <a href="../html/product_detail.html?id=${elm.id}">                           
                                <img src="..${pic.src}" alt="${pic.title}">
                                <span>${elm.title}</span>
                                <em>${elm.price}</em>
                            </a>
                        </li>`;
                } else if (elm.type == "fixings") {
                    template2 += `<li>
                            <a href="../html/product_detail.html?id=${elm.id}">                         
                                <img src="..${pic.src}" alt="${pic.title}">
                                <span>${elm.title}</span>
                                <em>${elm.price}</em>
                            </a>
                        </li>`;
                } else {
                    template3 += `<li>
                            <a href="../html/product_detail.html?id=${elm.id}">                       
                                <img src="..${pic.src}" alt="${pic.title}">
                                <span>${elm.title}</span>
                                <em>${elm.price}</em>
                            </a>
                        </li>`;
                }
            })
            phonePic.append(template);
            voicePic.append(template1);
            fixings.append(template2);
            life.append(template3);

        }
    });
})